<template>
  <div class="descriptions" :class="{ 'u-border': border }">
    <div class="u-row" v-for="cols in rows">
      <div class="u-col" v-for="col in cols">
        <div class="u-label" :style="labelStyle">
          <slot :name="col.labelSlot">{{ col.label }}</slot>
        </div>
        <div class="u-value" :style="valueStyle">
          <slot :name="col.valueSlot">{{ valueFormatter(col) }}</slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Descriptions">
import { inject } from 'vue'

const props = defineProps({
  rows: {
    type: Array,
    default: () => [],
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  border: Boolean, // 是否有边框
  labelStyle: {
    type: Object,
    default: () => ({}),
  },
  valueStyle: {
    type: Object,
    default: () => ({}),
  },
})

const emptyCellText = inject('emptyCellText', '--')

function valueFormatter(col) {
  let value = col.value || props.data?.[col.prop]
  if (col.formatter) value = col.formatter(value)
  return value === null || value === undefined || value === ''
    ? emptyCellText
    : value
}
</script>

<style lang="stylus" scoped>
.descriptions
  .u-row
    display flex
    .u-col
      display flex
      flex 1
      .u-label
        padding 14px 0
        width 100px
        text-align center
        color #27243f
      .u-value
        flex 1
        padding 14px 0 14px 20px
        color #616998
        word-break: break-all;
  &.u-border
    border-right 1px solid #eaeff4
    border-bottom 1px solid #eaeff4
    .u-label
      background #edf6fd
    .u-label,.u-value
      border-left 1px solid #eaeff4
      border-top 1px solid #eaeff4
</style>
